<template>
	<view style="min-height: 100vh; ">
		<!-- 固定的按钮 -->
		<view class="NavBar"
			:style="{'paddingTop':topHight +'rpx','height':topHight+130 +'rpx','backgroundColor':'rgba(255, 255, 255,'+num+')'}">
			<view class="flex isBtn" @click="goBack">
				<fui-icon name="arrowleft" color="#FFF" :size="40"></fui-icon>
			</view>
			<view class="flex isBtn">
				<fui-icon name="share" color="#FFF" :size="40"></fui-icon>
			</view>
			<!-- 			<view class="isBtn">
				新访客
			</view> -->
		</view>
		<!-- 背景图片 -->
		<view class="backImage">
			<image src="/static/test/userheader.jpg" mode="aspectFill" alt="" />
		</view>
		<view class="msgBox">
			<view class="titleBox flex-js">
				<view class="" style="line-height: 50rpx;">
					<view class="" style="font-weight: 600;">
						恋乡太行水镇玉米冒险村>
					</view>
					<view class="" style="font-size: 26rpx;color: #7F7F7F;">
						1件在架·1件有佣|月售24|266人带过
					</view>
					<view class="" style="font-size: 26rpx;">
						4.5合作分
					</view>
				</view>
				<view class="">
					45km
				</view>
			</view>
			<view class="contentBox">
				<view class=" " style="border-bottom: 1rpx solid #F3F3F3;padding-bottom: 20rpx;">
					<view class="flex-js">
						<view class="" style="font-weight: 600;">
							无门槛带货商品
						</view>
						<view class="">
							咨询
						</view>
					</view>
					<view class="">
						本地商户
					</view>
					<view class="flex-js" style="font-size: 28rpx;color:#7A7A7A ;">
						<view class="">
							佣金率 4.17
						</view>
						<view class="">
							预计每单可赚1.92
						</view>
					</view>
				</view>
				<view class="">
					<view class="" style="padding: 20rpx 0rpx;font-weight: 600;">
						带货商品（1）
					</view>
					<view class="flex">
						<view class="goodsImg">
							<image src="../../static/indexad/zfb.png" mode=""></image>
						</view>
						<view class="">
							<view class="">
								恋乡农场观光票
							</view>
							<view class="">
								<text>￥46</text>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="" style="padding: 20rpx 0rpx;font-weight: 600;">
						任务明细
					</view>
					<view class="">
						1231231232132123
						213212132
						231
						321
					</view>
				</view>
			</view>
			<view class="btnBox">
				立即报名
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHight: 0,
				num: 0,
			};
		},
		onPageScroll(e) {

			this.num = e.scrollTop / 200
			this.scrollTop = e.scrollTop
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
		},
		methods: {
			goBack() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					},
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.goodsImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
		}
	}

	.btnBox {
		text-align: center;
		border-radius: 20rpx;
		padding: 25rpx 0rpx;
		background-color: #FD2A53;
		color: white;
	}

	.contentBox {
		padding: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.titleBox {
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1));
	}

	.NavBar {
		padding: 5rpx 20rpx;
		z-index: 22;
		width: 100%;
		position: fixed;
		display: flex;
		align-items: flex-end;

	}

	.msgBox {
		padding: 0rpx 20rpx;
		min-height: 100vh;
		position: relative;
		top: -100rpx;

	}

	.backImage {
		width: 100%;

		image {
			border-radius: 0rpx 0rpx 15rpx 15rpx;
			width: 100%;

		}
	}



	.infoBox {
		padding: 50rpx 20rpx;
		width: 100%;
		position: absolute;
		left: 0;

	}

	.isBtn {
		width: 70rpx;
		height: 70rpx;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 100%;
		font-size: 24rpx;
		text-align: center;
		margin-right: 20rpx;
	}
</style>